<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doolhof voor informatica</title>
<link rel="stylesheet" href="css_doolhof.css" />
<script src="levelcode.js"></script>
<script type="text/javascript">
var currentLevel = 0;
var amountOfLevels = 5;
var isMoving = false;
var ytemp = 0;
var xtemp = 0;
var ptempx;
var ptempy;
var y = 0;
var x = 0;
var timeOut = 10000;
var punten = 0;
var direction = 0;
function init() {
	loadLevel(currentLevel);
	table = document.getElementById('t');
	table.rows[y].cells[x].className = "player";
	loop();
}

function loop(){
	table.rows[y].cells[x].className = "empty";
	ytemp = y;
	xtemp = x;
	if(direction != 0){
		isMoving = true;
	}
	if(direction == 37){
		x--;
	}
	if(direction == 38){
		y--;	
	}
	if(direction == 39){
		x++;	
	}
	if(direction == 40){
		y++;	
	}
	collisionCheck();
	tempReload();
	table.rows[y].cells[x].className = "player";
	setTimeout("loop()", 100);
}

function collisionCheck(){
	if(y<0 || y>table.rows.length - 1 || x<0 || x>table.rows[y].cells.length - 1 || table.rows[y].cells[x].className == "muur"){
		direction = 0;
		y = ytemp;
	    x = xtemp;
		isMoving = false;
	}
	else if(table.rows[y].cells[x].className == "finish"){
		if(currentLevel+1 < amountOfLevels){
			loadLevel(++currentLevel);
		}
		else{
			alert("Goedzo, je hebt het spel uitgespeeld!");
			if(confirm("Wil je opnieuw beginnen?")){
				loadLevel(0);
			}
		}		
	}
	else if(table.rows[y].cells[x].className == "muurvanlinks"){
		if(!(xtemp + 1 == x)){
			direction = 0;
			y = ytemp;
	   	 	x = xtemp;
			isMoving = false;
		} 
	}
	else if(table.rows[y].cells[x].className == "muurvanrechts"){
		if(!(xtemp - 1 == x)){
			direction = 0;
			y = ytemp;
	   	 	x = xtemp;
			isMoving = false;
		}
	}
	else if(table.rows[y].cells[x].className == "muurvanonder"){
		if(!(ytemp - 1 == y)){
			direction = 0;
			y = ytemp;
	   	 	x = xtemp;
			isMoving = false;
		}
	}
	else if(table.rows[y].cells[x].className == "muurvanboven"){
		if(!(ytemp + 1 == y)){
			direction = 0;
			y = ytemp;
	   	 	x = xtemp;
			isMoving = false;
		}
	}
	else if(table.rows[y].cells[x].className == "portaal1"){
		for(i=0; i<levels[currentLevel].length; i++){
			for(j=0; j<levels[currentLevel][i].length; j++){
				if(levels[currentLevel][i][j] == 8 && table.rows[y].cells[x] != table.rows[i].cells[j]){
					ptempx = j;
					ptempy = i;
				}
			}
		}
		x = ptempx;
		y = ptempy;
	}
	else if(table.rows[y].cells[x].className == "portaal2"){
		for(i=0; i<levels[currentLevel].length; i++){
			for(j=0; j<levels[currentLevel][i].length; j++){
				if(levels[currentLevel][i][j] == 9 && table.rows[y].cells[x] != table.rows[i].cells[j]){
					ptempx = j;
					ptempy = i;
				}
			}
		}
		x = ptempx;
		y = ptempy;
	}
	else if(table.rows[y].cells[x].className == "portaal3"){
		for(i=0; i<levels[currentLevel].length; i++){
			for(j=0; j<levels[currentLevel][i].length; j++){
				if(levels[currentLevel][i][j] == 10 && table.rows[y].cells[x] != table.rows[i].cells[j]){
					ptempx = j;
					ptempy = i;
				}
			}
		}
		x = ptempx;
		y = ptempy;
	}
	else if(table.rows[y].cells[x].className == "portaal4"){
		for(i=0; i<levels[currentLevel].length; i++){
			for(j=0; j<levels[currentLevel][i].length; j++){
				if(levels[currentLevel][i][j] == 11 && table.rows[y].cells[x] != table.rows[i].cells[j]){
					ptempx = j;
					ptempy = i;
				}
			}
		}
		x = ptempx;
		y = ptempy;
	}
	else if(table.rows[y].cells[x].className == "trap"){
		x = 0;
		y = 0;
		direction = 0;
	}
}

function tempReload(){ 
	for(i=0; i<levels[currentLevel].length; i++){
		for(j=0; j<levels[currentLevel][i].length; j++){
			if(table.rows[i].cells[j].className != "player"){
				if(levels[currentLevel][i][j] == 4){			
					table.rows[i].cells[j].className = "muurvanlinks";	
				}
				else if(levels[currentLevel][i][j] == 5){	
					table.rows[i].cells[j].className = "muurvanrechts";
				}
				else if(levels[currentLevel][i][j] == 6){			
					table.rows[i].cells[j].className = "muurvanboven";	
				}
				else if(levels[currentLevel][i][j] == 7){
					table.rows[i].cells[j].className = "muurvanonder";
				}
				else if(levels[currentLevel][i][j] == 8){
					table.rows[i].cells[j].className = "portaal1";
				}
				else if(levels[currentLevel][i][j] == 9){
					table.rows[i].cells[j].className = "portaal2";
				}
				else if(levels[currentLevel][i][j] == 10){
					table.rows[i].cells[j].className = "portaal3";
				}
				else if(levels[currentLevel][i][j] == 11){
					table.rows[i].cells[j].className = "portaal4";
				}
				else if(levels[currentLevel][i][j] == 12){
					table.rows[i].cells[j].className = "trap";
				}
			}
		}
	}
}

function checkKey(key){
	if(!isMoving){
		if (key.keyCode == 37 || key.keyCode == 38 || key.keyCode == 39 || key.keyCode == 40){
			direction = key.keyCode;		
		}
	}
}

function loadLevel(level){
	table = document.getElementById('t');
	isMoving = false;
	direction = 0;
	currentLevel = level;
	for(i=0; i<levels[level].length; i++){
		for(j=0; j<levels[level][i].length; j++){
			if(levels[level][i][j] == 0){
				table.rows[i].cells[j].className = "empty";
			}
			else if(levels[level][i][j] == 1){
				table.rows[i].cells[j].className = "muur";
			}
			else if(levels[level][i][j] == 2){
				table.rows[i].cells[j].className = "player";
				x = j;
				y = i;
			}
			else if(levels[level][i][j] == 3){
				table.rows[i].cells[j].className = "finish";
			}
			else if(levels[level][i][j] == 4){
				table.rows[i].cells[j].className = "muurvanlinks";
			}
			else if(levels[level][i][j] == 5){
				table.rows[i].cells[j].className = "muurvanrechts";
			}
			else if(levels[level][i][j] == 6){
				table.rows[i].cells[j].className = "muurvanboven";
			}
			else if(levels[level][i][j] == 7){
				table.rows[i].cells[j].className = "muurvanonder";
			}
			else if(levels[level][i][j] == 8){
				table.rows[i].cells[j].className = "portaal1";
			}
			else if(levels[level][i][j] == 9){
				table.rows[i].cells[j].className = "portaal2";
			}
			else if(levels[level][i][j] == 10){
				table.rows[i].cells[j].className = "portaal3";
			}
			else if(levels[level][i][j] == 11){
				table.rows[i].cells[j].className = "portaal4";
			}
			else if(levels[level][i][j] == 12){
				table.rows[i].cells[j].className = "trap";
			}
		}
	}
}

</script>
</head>
<body onLoad="init()" onKeyUp="checkKey(event)">
<input type="button" onclick="loadLevel(0);" value="Laad level 1" />
<input type="button" onclick="loadLevel(1);" value="Laad level 2" />
<table id="t" border="1" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
